<template>
  <div class="content-wrapper">
      <div class="title">
          账套信息
      </div>
      <div class="content">
          <div class="panel">
            <div class="panel-heading">
            </div>
            <div class="panel-body clearfix">
                <div class="row w50 fl">
                    <label for="">账套编号：</label>
                    <input type="text" v-model="accountInfo.AccountCode" style="background-color: #ccc;" placeholder="请输入账套编号" disabled>
                </div>
                <div class="row w50 fr">
                    <label for="">账套名称：</label>
                    <input type="text"  v-model="accountInfo.AccountName" placeholder="请输入单位名称">
                </div>
                <div class="row w50 fl">
                    <label for="">账套简称：</label>
                    <input type="text" v-model="accountInfo.ShortName" placeholder="请输入简称">
                </div>
                <div class="row w50 fr">
                    <label for="">账套备注：</label>
                    <input type="text" v-model="accountInfo.Memo" placeholder="请输入备注">
                </div>
                <el-button type="" class="Info fr" size="mini" @click="fnSaveInfo()">保存</el-button>
            </div>
          </div>
          <div class="tab">
            <el-tabs type="border-card">
                <el-tab-pane label="数据库配置">
                    <div class="row w50 fl">
                        <label for="">数据库服务器：</label>
                        <input type="text" v-model="dataBase.DBServer" placeholder="请输入数据库服务器">
                    </div>
                    <div class="row w50 fr">
                        <label for="">数据库名：</label>
                        <input type="text" v-model="dataBase.DBName" placeholder="请输入数据库名">
                    </div>
                    <div class="row w50 fl">
                        <label for="">数据库用户名：</label>
                        <input type="text" v-model="dataBase.DBUid" placeholder="请输入数据库用户名">
                    </div>
                    <div class="row w50 fr">
                        <label for="">数据库密码：</label>
                        <input type="password" v-model="dataBase.DBPwd" placeholder="请输入数据库密码">
                    </div>
                    <el-button type="" class="Info fr" size="mini" @click="fnSaveDB">保存</el-button>
                    <!-- <button class="btn small Info fr" style="margin-right:20px;">保存</button> -->
                    <!-- 如果账套状态为已创建数据，则禁用按钮 -->
                    <el-button type="" class="Info fr" size="mini"  style="margin-right:20px;" :disabled="dataBase.State==3" @click="fnCreateDB()">创建数据库</el-button>
                    <!-- <button class="btn small Info fr" style="margin-right:20px;" disabled>创建数据库</button> -->
                </el-tab-pane>

                <el-tab-pane label="基本信息">
                    <div class="row w50 fl">
                        <label for="">负责人姓名：</label>
                        <input type="text" v-model="userInfo.Principal" placeholder="请输入负责人姓名">
                    </div>
                    <div class="row w50 fr">
                        <label for="">负责人电话：</label>
                        <input type="text" v-model="userInfo.Tel" placeholder="请输入负责人电话">
                    </div>
                    <div class="row w50 fl">
                        <label for="">有效期：</label>
                        <el-date-picker  v-model="userInfo.ValidDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date" placeholder="请选择日期">
                        </el-date-picker>
                        <!-- <input type="text" v-model="userInfo.ValidDate" placeholder="请输入有效期"> -->
                    </div>
                    <div class="row w50 fr">
                        <label for="">联系地址：</label>
                        <input type="text" v-model="userInfo.Address" placeholder="请输入联系地址">
                    </div>
                    <div class="row w50 fl">
                        <label for="">负责人EMail：</label>
                        <input type="text" v-model="userInfo.EMail" placeholder="请输入负责人EMail">
                    </div>
                    <div class="row w50 fr">
                        <label for="">Token有效期：</label>
                        <input type="text" v-model="userInfo.TokenValidTimes" placeholder="请输入Token有效时长">
                    </div>
                    <button class="btn small Info fr" style="margin-right:20px;" @click="fnSaveInfo">保存</button>
                </el-tab-pane>
                <el-tab-pane label="系统选项" class="option">
                    <div class="row fr" v-for="(item, index) of options" :key="index" style="width: 95%;">
                      <label for="">{{ item.OptionCaption }}：</label>
                      <input type="text" v-model="item.ItemValue" v-if="item.OptionType == 1 || item.OptionType == 2 || item.OptionType == 8">
                      <el-date-picker
                        v-model="item.OptionKey"
                        type="date"
                        v-else-if="item.OptionType == 3"
                        placeholder="选择日期">
                      </el-date-picker>
                      <el-checkbox :label="item.OptionKey" v-model="item.ItemValue" v-else-if="item.OptionType == 4"></el-checkbox>
                      <el-select v-model="item.ItemValue" v-else-if="item.OptionType == 5">
                        <el-option v-for="(item1, index) of item.EnumOptions" :label="item1.Caption" :value="item1.Value" :key="item1.Value"></el-option>
                      </el-select>
                      <div class="list" id="list" v-else-if="item.OptionType == 6">
                        <el-tag
                          :key="tag"
                          v-for="tag in tags"
                          closable
                          :disable-transitions="false"
                          @close="handleClose(tag, index)">
                          {{tag}}
                        </el-tag>
                        <div style="display: inline-block;width: 50%;"  v-if="inputVisible">
                          <el-input
                            class="input-new-tag"

                            v-model="inputValue"
                            ref="saveTagInput"
                            size="small"
                            @keyup.enter.native="handleInputConfirm(index)"
                            @blur="handleInputConfirm(index)"
                          >
                          </el-input>
                        </div>

                        <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 增加</el-button>
                      </div>
                      <div class="list1" v-else-if="item.OptionType == 7">
                        <span>{{ item.Caption }}</span>
                        <div style="display: inline-block;">
                          <el-tooltip class="item" effect="dark" :content="item.MultiValue.Caption1" placement="right-start">
                            <el-button><span>?</span></el-button>
                          </el-tooltip>
                          <div style="width: 70%;display: inline-block;">
                            <el-input v-model="item.MultiValue.Value1"></el-input>
                          </div>
                        </div>
                        <div style="display: inline-block;">
                          <el-tooltip class="item" effect="dark" :content="item.MultiValue.Caption2" placement="right-start">
                            <el-button><span>?</span></el-button>
                          </el-tooltip>
                          <div style="width: 70%;display: inline-block;">
                            <el-input v-model="item.MultiValue.Value2"></el-input>
                          </div>
                        </div>
                        <div style="display: inline-block;">
                          <el-tooltip class="item" effect="dark" :content="item.MultiValue.Caption3" placement="right-start">
                            <el-button><span>?</span></el-button>
                          </el-tooltip>
                          <div style="width: 70%;display: inline-block;">
                            <el-input v-model="item.MultiValue.Value3"></el-input>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="btn" style="text-align: right;width: 100%;">
                      <button class="btn small Info fr" style="margin-right:20px;" @click="saveConfig">保存</button>
                    </div>
                </el-tab-pane>
            </el-tabs>
          </div>
      </div>
  </div>
</template>
<script>
import Api from "../../axios/api";
import systemConfig from "../systemConfig"
export default {
  name: "AccountInfo",
  data() {
    return {
      pages: 1, //翻页
      total: 20, //条数
      state: 1,
      search: "",
      options: [],
      inputVisible: false,
      tags: [],
      moreValue: [],
      inputValue: '',
      form: {
        tokenTime: '',
        deviceTime: '',
        title1: '',
        title2: ''
      },
      ID: "",
      Data: "",
      accountInfo: {
        AccountCode: "",
        AccountName: "",
        ShortName: "",
        Memo: ""
      }, //账套信息
      userInfo: {
        Principal: "",
        Tel: "",
        ValidDate: "",
        EMail: "",
        Address: "",
        TokenValidTimes:''
      }, //基本信息
      dataBase: {
        DBServer: "",
        DBName: "",
        DBUid: "",
        DBPwd: "",
        State:1
      }, //数据库信息
      Mqtt: {
        MQTTServer: "",
        MQTTUid: "",
        MQTTPwd: "",
        mins:''
      } //MQTT信息
    };
  },
  components: {
    systemConfig
  },
  computed: {

  },
  mounted() {
    this.ID = this.$route.params.id;
    this.getAccount(this.ID);
    this.getSystemConfig(this.ID);
  },
  methods: {
    getAccount(id) {
      this.loading = true;
      this.$get(Api.getmodel + "/" + id)
        .then(res => {
          this.loading = false;
          if (res.data.state == 200) {
            this.Data = res.data.data;

            //账套信息
            this.accountInfo.AccountCode = res.data.data.AccountCode;
            this.accountInfo.AccountName = res.data.data.AccountName;
            this.accountInfo.ShortName = res.data.data.ShortName;
            this.accountInfo.Memo = res.data.data.Memo;

            //基本信息
            this.userInfo.Principal = res.data.data.Principal;
            this.userInfo.Tel = res.data.data.Tel;
            this.userInfo.ValidDate = res.data.data.ValidDate;
            this.userInfo.EMail = res.data.data.EMail;
            this.userInfo.Address = res.data.data.Address;
            this.userInfo.TokenValidTimes = res.data.data.TokenValidTimes;

            //数据库信息
            this.dataBase.DBServer = res.data.data.DBServer;
            this.dataBase.DBName = res.data.data.DBName;
            this.dataBase.DBUid = res.data.data.DBUid;
            this.dataBase.DBPwd = res.data.data.DBPwd;
            this.dataBase.State=res.data.data.State;

            //MQTT信息
            this.Mqtt.MQTTServer = res.data.data.MQTTServer;
            this.Mqtt.MQTTUid = res.data.data.MQTTUid;
            this.Mqtt.MQTTPwd = res.data.data.MQTTPwd;
            this.Mqtt.mins = res.data.data.DeviceSleepTime;
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((error)=> {
          this.loading = false;
          this.$message.error(error);
        });
    },

    getSystemConfig(id) {
      console.log(id);
      this.$get(Api.getoptions + '/' + id).then(res => {
        console.log(res)
        if(res.data.state == 200) {
          this.options = JSON.parse(JSON.stringify(res.data.data));
          console.log(this.options);
          this.options.forEach((item, index) => {
            switch (item.OptionType) {
              case 1: {
                console.log('string');
                break;
              }
              case 2:
                console.log('number');
                break;
              case 3:
                console.log('date');
                break;
              case 4:
                if(item.ItemValue == 'True') {
                  item.ItemValue = true;
                }else {
                  item.ItemValue = false
                }
                console.log(item.ItemValue)
                console.log('boolean');
                break;
              case 5:
                item.ItemValue = parseInt(item.ItemValue);
                console.log('enmu');
                break;
              case 6:
                this.tags = item.ListValue
                console.log("tags:"+this.tags, item.ListValue)
                // console.log('集合');
                break;
              case 7:
                this.moreValue = JSON.parse(JSON.stringify(item.MultiValue));
                console.log(this.moreValue)
                break;
              case 8:
                // console.log('整数');
                break;
            }
          })
        }
      }).catch(err => {
        console.log(err);
      })
    },
    //创建数据库
    fnCreateDB() {
      this.loading = true;
      this.$get(Api.createdb + "/" + this.ID)
        .then(res => {
          this.loading = false;
          if (res.data.state == 200) {
            this.$message({
              message: "数据库创建成功",
              type: "success"
            });
            this.getAccount(this.ID);
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((error)=> {
          this.loading = false;
          this.$message.error(error);
        });
    },
    //保存数据库配置
    fnSaveDB() {
      this.loading = true;
      this.$post(Api.setdbserver, {
          AccountID: this.ID,
          DBServer: this.dataBase.DBServer,
          DBName: this.dataBase.DBName,
          DBUid: this.dataBase.DBUid,
          DBPwd: this.dataBase.DBPwd
        })
        .then(res => {
          this.loading = false;
          if (res.data.state == 200) {
            this.$message({
              message: "数据库配置保存成功",
              type: "success"
            });
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((error)=> {
          this.loading = false;
          this.$message.error(error);
        });
    },
    //保存账套信息
    fnSaveInfo() {
      // if(!this.$isEmail(this.userInfo.EMail)){
      //   this.$message.error('邮箱格式不对，请重新输入！');
      //   this.userInfo.EMail='';
      //   return false;
      // }
      // if(!this.$isTel(this.userInfo.Tel)){
      //   this.$message.error('联系电话格式不正确，请输入正确的手机号或带区号的固定电话！');
      //   this.userInfo.Tel='';
      //   return false;
      // }
      this.loading = true;
      this.$post(Api.setaccountinfo, {
          AccountID: this.ID,
          AccountName: this.accountInfo.AccountName,
          ShortName: this.accountInfo.ShortName,
          Principal: this.userInfo.Principal,
          Tel: this.userInfo.Tel,
          Address: this.userInfo.Address,
          EMail: this.userInfo.EMail,
          ValidDate: this.userInfo.ValidDate,
          Memo: this.accountInfo.Memo,
          TokenValidTimes:this.userInfo.TokenValidTimes
        })
        .then(res => {
          this.loading = false;
          if (res.data.state == 200) {
            this.$message({
              message: "账套信息保存成功",
              type: "success"
            });
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((error)=> {
          this.loading = false;
          this.$message.error(error);
        });
    },
    //保存MQTT配置
    fnSaveMQTT() {
      this.loading = true;
      this.$post(Api.setmqtt, {
          AccountID: this.ID,
          MQTTServer: this.Mqtt.MQTTServer,
          MQTTUid: this.Mqtt.MQTTUid,
          MQTTPwd: this.Mqtt.MQTTPwd,
          DeviceSleepTime:this.Mqtt.mins
        })
        .then(res => {
          this.loading = false;
          if (res.data.state == 200) {
            this.$message({
              message: "MQTT配置保存成功",
              type: "success"
            });
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((error)=> {
          this.loading = false;
          this.$message.error(error);
        });
    },
    handleClose(tag, index) {
      this.tags.splice(this.tags.indexOf(tag), 1);
      // this.options.forEach((item, sub) => {
      //   // console.log(sub, index)
      //   if(sub == index) {
      //     item.ListValue.splice(item.ListValue.indexOf(tag), 1);
      //
      //   }
      // })
      // console.log(this.options)
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        try {
          this.$refs.saveTagInput.$refs.input.focus();
        }catch (e) {
          console.log(e)
        }

      });
    },

    handleInputConfirm(index) {
      console.log(this.tags);
      let inputValue = this.inputValue;
      if (inputValue) {
        if(!this.tags) {
          this.tags = [];
        }
        this.tags.push(inputValue);
        // this.options.forEach((item, sub) => {
        //   if(sub == index) {
        //
        //     item.ListValue.push(inputValue)
        //     // console.log(item.ListValue)
        //   }
        // })
      }
      this.inputVisible = false;
      this.inputValue = '';
    },
    saveConfig() {
      let accountID = this.ID;
      let Options = [];
      this.options.forEach((item, index) => {
        Options.push(item);
      });
      let params = {
        "AccountID": accountID,
        "Options": Options
      }
      console.log(params);
      this.$post(Api.setoptions, params).then(res => {
        console.log(res)
      })
    }
    
  }
};
</script>
<style scoped>
.list {
  display: inline-block;
}
  .el-input {
    display: inline-block;
  }
.input-new-tag {
  width: 100px;
  margin-left: 10px;
  vertical-align: bottom;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
  .last span {
    margin-right: 10px;
  }
  .btn {
    cursor: auto;
  }
.row label {
  text-align: left;
}
.list1 {
  display: inline-block;
}
.list1 .el-button {
  padding: 8px!important;
}
.el-input{
  width: auto;
}
</style>
